<template>

    <nav v-if="!$route.meta.loginNav">
    
        <router-link to="/home">
          <div @click="changePic1">
            <img v-show="pic1==0" src=".\assets\首页.png">
            <img v-show="pic1==1" src=".\assets\shouye.png">
          </div>
          <div class="text">首页</div>
        </router-link> 
    
        <router-link to="/shopping">
          <div @click="changePic2" style="margin-left:1.8vw">
            <img v-show="pic2==0" src=".\assets\购物车.png">
            <img v-show="pic2==1" src=".\assets\shopping.png">
          </div>
          <div class="text">购物车</div>
        </router-link> 
      
       <router-link to="/about">
          <div @click="changePic3">
            <img v-show="pic3==0" src=".\assets\订单.png">
            <img v-show="pic3==1" src=".\assets\dingdan.png">
          </div>
          <div class="text">订单</div>
        </router-link>
     
        <router-link to="/first">
          <div @click="changePic4">
            <img v-show="pic4==0" src=".\assets\wode.png">
            <img v-show="pic4==1" src=".\assets\me.png">
          </div>
          <div class="text">我的</div>
        </router-link>
       
    </nav> 
  <router-view/>
</template>

<script>
  import {add} from '@/util/index'
  import {mapState,mapGetters,mapMutations} from 'vuex'
  export default{
    data(){
      return {    
        name:'',
        pic1: 0,
        pic2: 0,
        pic3: 0,
        pic4: 0,
      }
    },
    computed:{
      ...mapState(['count','size']),
      ...mapGetters(['doneTodos','notTodos']) 
    },
    created(){
      //console.log(add(1,2))
      //console.log(this.$store.state.isLogin)
      //console.log(this.$store.getters.doneTodos)
      //console.log(this.$store.getters.notTodos)
      //console.log(this.$store.state.todos[0].done)
    },
    methods:{
      ...mapMutations(['increment','change']),
      bigger(){
        //this.$store.commit('increment',2)
        this.increment(2)
      },
      exchange(n){
        this.$store.commit('change', n-1)
      },
     changePic1(){
        this.pic1=1;
        this.pic2=0;
        this.pic3=0;
        this.pic4=0;
     },
     changePic2(){
        this.pic1=0;
        this.pic2=1;
        this.pic3=0;
        this.pic4=0;
     },
     changePic3(){
        this.pic1=0;
        this.pic2=0;
        this.pic3=1;
        this.pic4=0;
     },
     changePic4(){
        this.pic1=0;
        this.pic2=0;
        this.pic3=0;
        this.pic4=1;
     },
     
    }
  }
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}

body{
  margin:0;
}

nav {
  padding:2vw 0vw 2vw 0vw; 
  background:white;
  position:fixed;
  bottom:0vw;
  width:100vw;
  justify-content:space-around;
  display:flex;
  .text {
    text-align:center;
  }

  img{
    width:8vw;
  }

  a {
    text-decoration:none;
    font-weight: bold;
    color: #2c5037;

    &.router-link-exact-active {
      color:#1296db;
    }
  }
}
</style>
